<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>在线员工</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="app-container">
      <el-card class="filter-container" shadow="never">
        <div>
          <i class="el-icon-search"></i>
          <span>筛选搜索</span>
          <el-button
            style="float: right"
            @click="handleSearchList()"
            type="primary"
            size="small">
            查询结果
          </el-button>
          <el-button
            style="float: right;margin-right: 15px"
            @click="handleResetSearch()"
            size="small">
            重置
          </el-button>
        </div>
        <div style="margin-top: 15px">
          <el-form :inline="true" :model="workorderList" size="small" label-width="140px">
            <div>
              <el-input style="width: 15%" v-model="workorderList.keyword" placeholder="员工编号"></el-input>
              <el-input style="width: 15%" v-model="workorderList.productSn" placeholder="员工姓名"></el-input>


            </div>
          </el-form>
        </div>
      </el-card>


      <div class="table-container">
        <el-table ref="productTable"
                  :data="userlist"
                  style="width: 103vm"
                  @selection-change="handleSelectionChange"
                  v-loading="listLoading"
                  border>
          <el-table-column label="员工编号" width="150vm" align="center">
            <template slot-scope="scope">{{scope.row.id}}</template>
          </el-table-column>
          <el-table-column label="员工姓名" width="150vm" align="center">
            <template slot-scope="scope">{{scope.row.username}}</template>
          </el-table-column>
          <el-table-column label="小组名称" width="150vm" align="center">
            <template slot-scope="scope">{{scope.row.groupname}}</template>
          </el-table-column>
          <el-table-column label="服务状态" width="150vm" align="center">
            <template slot-scope="scope" class="servingtest">
              <span v-if="scope.row.serving==0" style="color: red">暂停服务</span>
              <span v-else style="color: green"> 正在服务</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :page-size="workorderList.pageSize"
          :page-sizes="[5,10,15]"
          :current-page.sync="workorderList.pageNum"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>

  import axios from 'axios';
  const defaultWorkorderList={

  }
  export default {
    name: "OrderOnline",
    data(){
      return{
        userlist:[
          {"id":1,"username":"章章章","groupname":"运营组","serving":0},
          {"id":2,"username":"汪汪汪","groupname":"客服组","serving":1}
        ],

        workorderList:Object.assign({},defaultWorkorderList),
        radio:1

      }
    },
    mounted(){

      axios.get("/api/online/users")
        .then((res)=>{
          console.log(res)
          console.log(res.data);
          console.log(res.data.data)
          this.userlist = res.data.data
          //console.log(this.userList)
        })
    }
  }
</script>

<style scoped>

  .servingtest{
    background-color: red;
  }
</style>
